<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cssDemo2</title>
</head>
<body>
      <div class="one">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
    </div>     
     <!-- <div>居中元素</div>
     <div class="one">
        <div class="two">居中元素</div>
    </div> -->

    <!-- <span>1</span>
    <span>2</span> -->
    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: gray;
            /* 弹性布局 */
            display: flex;
            justify-content: space-around;
            align-items:center ;
        }
        .two {
            width: 200px;
            height: 100px;
            background-color: green;
        }
        * {
            /* 此时边框不会被撑大，*表示选择全部，称为通配符选择器，类似与MySQL的select * from */
            box-sizing: border-box;
        }
        /* .two {
            width: 100px;
            height: 100px;
            background-color: red; */
             /* 设置外边框 */
            /* margin: 50px; */
            /* 左右设置aoto可以实现元素居中，但垂直设置成auto不会实现 */
           /* margin-left: auto;
           margin-right: auto
        } */
        /* div {
            width: 500px;
            height: 300px;
            background-color: gray;
           */

            /* 设置边框，也可以分别给上下左右四个边框分别设置 ，border里面属性顺序可以改变*/
            /* border: red 20px  solid; */
            /* border-left: 20px blue solid;
            border-right: 20px yellow dotted;
            border-top: 20px green dashed;
            border-bottom: 20px red solid; */
            /* 设置内边距，即元素与边框之间的距离 */
            /* padding: 30px; */
            /* 也可分别给四边设置内边距 */
            /* padding-left: 50px;
            padding-right: 30px;
            padding-top: 40px;
            padding-bottom: 20px; */
            /* 给上下  左右分别设置 */
            /* padding: 50px  30px; */
            /* 给四个方向设置，分别是上右下左，顺时针 */
            /* padding: 50px 30px 60px 20px; */
          
        /* } */
        /* span为行内元素，div为块级元素，设置长宽只能对块级元素生效，可使用display将其变为块级元素 */
        /* span {
            display: block;
            width: 100px;
            height: 100px;
        } */
    </style>
</body>
</html>